<template>
  <by-draw-bottom :model-value="modelValue" @close="$emit('update:modelValue',false)">
    <view class="padding-top-158">
      <image src="/static/safeguard-banner.png" class="safeguard-banner width-full" />
      <view class="draw-content bg-white relative">
        <view v-for="(item,index) in list" :key="index" class="margin-top-60">
          <view class="flex-row align-center">
            <view class="decorate" />
            <text class="text-32 color-t1 text-bold margin-left-20">{{item.title}}</text>
          </view>
          <view class="margin-top-26">
            <text class="color-t2 text-28 content">{{item.content}}</text>
          </view>
        </view>
      </view>
    </view>
  </by-draw-bottom>
</template>

<script setup lang="ts">
interface IProps{
  modelValue: boolean
}

withDefaults(defineProps<IProps>(), {
  modelValue: false
})

const $emit = defineEmits(['update:modelValue'])

const list = [
  {
    title: '联系保障',
    content: '在联系过程中，不会有恶意欺骗行为'
  },
  {
    title: '服务保障',
    content: '已经达成服务约定后，不会随意毁约'
  },
  {
    title: '担保计划服务',
    content: '若发生欺骗等行为，经客服同双方调查确认后，可以扣除保证金'
  }
]
</script>

<style scoped lang="scss">
@include setMargin(top, 60);

@include setPadding(top, 158);

.safeguard-banner{
  @include position(absolute, 0, 0);
  height: 183rpx;
}

.draw-content{
  border-radius: 16rpx  16rpx 0 0;
  padding: 10rpx 40rpx 100rpx 50rpx;

  .decorate{
    width: 20rpx;
    height: 20rpx;
    background: linear-gradient(180deg, #FF8330, #FFCE58, #FFE773);
    border-radius: 50%;
  }

  .content{
    line-height:40rpx;
  }

}
</style>
